import React, { memo, useEffect, useState } from "react";
import { useDispatch, shallowEqual, useSelector } from "react-redux";
import { RankingLeftWrap } from "./style";
import { getTopList } from "../../recommend/store/actionType";
import RankLeft from "@/components/rankComponent/rankLeft";

export default memo(function RankingLeft(props) {
  const dispatch = useDispatch();
  const [nummm, setNummm] = useState(
    props.songIdFromProps.location.search.split("=")[1]
  );

  useEffect(() => {
    dispatch(getTopList());
  }, [dispatch]);

  const state = useSelector(
    (state) => ({
      topLists: state.getIn(["recommend", "topLists"]),
    }),
    shallowEqual
  );

  const setNumber = (id) => {
    setNummm(id);
  };

  return (
    <RankingLeftWrap>
      <RankLeft
        num={4}
        propsId={nummm}
        setNumber={setNumber}
        topLists={state.topLists}
      />
      <RankLeft
        num={5}
        propsId={nummm}
        setNumber={setNumber}
        topLists={state.topLists}
      />
    </RankingLeftWrap>
  );
});
